import { defineComponent, onMounted, ref } from "vue";
import { ThreeScene } from "./utils/ThreeScene";
import { CloudSea } from "./shaders/noise/CloudSea";

export default defineComponent({
  setup() {
    const wrapRef = ref<HTMLDivElement>();

    onMounted(() => {
      wrapRef.value && new ThreeScene(wrapRef.value).addPass(CloudSea);
    })

    return () => <div ref={wrapRef} style={{ height: '100vh', width: '100vw' }}></div>
  }
})